<template>
  <div class="schools">
    <div class="school_recrPhone">
      <h3>
        <div></div>联系方式
      </h3>

      <div class="recrPhone_school">
        <div>学校电话: {{ schoolList.recrPhone}}</div>
        <div>
          学校网址:
          <a :href="schoolList.websiteUrl">{{schoolList.websiteUrl}}</a>
        </div>
      </div>
    </div>
    <div class="school_Scenery">
      <h3>
        <div></div>学校风光
      </h3>
      <div class="school_img">
        <span v-for="(item ,index) in schoolList.schoolpicVos" :key="index">
          <img :src="item.schoolPic" alt />
        </span>
      </div>
    </div>
    <div class="school_video">
      <h3>
        <div></div>学校风光
      </h3>
      <div class="video">
        <div class="video_img" v-if="video == 0">
          <img :src="schoolList.schoolVidverUrl" alt />
          <div class="Mongolia">
            <div class="button" @click="playBtn()">
              <img src="@/assets/img/play.png" alt />
            </div>
          </div>
        </div>
        <video v-if="video == 1" width="100%" object-fit:fill autoplay controls loop poster>
          <source :src="schoolList.schoolVideoUrl" type="video/mp4" />您的浏览器不支持video标签
        </video>
      </div>
    </div>

    <div class="school_brief">
      <h3>
        <div></div>学校简介
      </h3>
      <div class="brief" v-html="Contents"></div>
    </div>
    <!-- <div class="school_Proportion">
      <div class="Proportion_left">
        <h3>
          <div></div>男女比例
        </h3>
        <div class="Proportion">
          <div class="topP">
            <div class="male">
              <img src="@/assets/img/male.png" alt />
            </div>
            <div class="girl">
              <img src="@/assets/img/girl.png" alt />
            </div>
          </div>

          <div class="Pprogress">
            <el-progress :percentage="50" :format="format"></el-progress>
          </div>
          <div class="number">
            <span>45.2%</span>
            <span>44.8%</span>
          </div>
        </div>
      </div>
      <div class="Proportion_right">
        <h3>
          <div></div>深造情况
        </h3>
        <div class="Proportion">
          <div class="topP">
            <div class="male">
              <img src="@/assets/img/male.png" alt />
            </div>
            <div class="girl">
              <img src="@/assets/img/girl.png" alt />
            </div>
          </div>

          <div class="Pprogress">
             <el-progress :percentage="50" :format="format"></el-progress>
          </div>
          <div class="number">
            <span>45.2%</span>
            <span>44.8%</span>
          </div>
        </div>
      </div>
    </div>-->
    <div class="df">
      <div class="estimate">
        <h3>
          <div></div>开设专业
        </h3>
        <div class="estimate_lists">
          <div class="lists_header">
            <span>编号</span>
            <span>专业名称</span>
          </div>
          <div></div>

          <div class="list_estimate" v-infinite-scroll="load" v-if="MajorLists.list.length > 0">
            <div
              class="major_lists"
              v-for="  (majorList , indexs) in MajorLists.list"
              :key="majorList.majorAllId+indexs"
            >
              <div class="estimate_left">
                <i>{{indexs+1}}</i>
                <span>{{majorList.majorName}}</span>
              </div>
              <div class="estimate_right icon">
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
            <p v-if="loading">加载中...</p>
            <p v-if="noMore">没有更多了</p>
          </div>
          <div class="list_null" v-else>
            <i class="el-icon-document-delete"></i>
            <h3>暂无数据...</h3>
          </div>
        </div>
      </div>
      <div class="estimate">
        <h3>
          <div></div>学科评估
        </h3>
        <div class="estimate_lists">
          <div class="lists_header">
            <span>编号</span>
            <span>专业名称</span>
            <span class="right">评分</span>
          </div>
          <div class="list_estimate" v-if="result.length > 0">
            <div class="major_lists" v-for="  (resultList , index) in result" :key="resultList.id">
              <div class="estimate_left">
                <i>{{index+1}}</i>
                <span>{{resultList.majorName}}</span>
              </div>
              <div class="estimate_right">{{resultList.assessResult}}</div>
            </div>
          </div>
          <div class="list_null" v-else>
            <i class="el-icon-document-delete"></i>
            <h3>暂无数据...</h3>
          </div>


        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { get } from "http";
export default {
  name: "School",
  data() {
    return {
      schoolList: "",
      video: "",
      format: "",
      schoolDeatils: "",
      Contents: "",
      result: "",
      count: 10,
      MajorLists: "",
      loading: false,
      totalCount:"",
    };
  },
  computed: {
    noMore() {
      return this.count >= this.totalCount;
    },
    disabled() {
      return this.loading || this.noMore;
    }
  },
  methods: {
    playBtn() {
      this.video = "1";
    },
    getSchool() {
      this.$ajax({
        method: "GET",
        url:
          "/api/searchUniversity/getSchoolGeneralize/" +
          this.$route.params.userId,

        success: res => {
          if (res.data.code == 0) {
            console.log(res.data.data);
            this.schoolList = res.data.data;
            let datas = res.data.data.introduce;
            this.Contents = datas.replace(/\n/g, "<p>");
          }
        }
      });
    },
    getResult() {
      this.$ajax({
        method: "GET",
        url: "/api/assess/result/school/" + this.$route.params.userId,

        success: res => {
          if (res.data.code == 0) {
            this.result = res.data.data;
          }
        }
      });
    },
    getSchoolMajor() {
      this.$ajax({
        method: "POST",
        url:
          "/api/subject/majorList?schoolId=" +
          this.$route.params.userId +
          "&pageNow=1" +
          "&pageSize=" +
          this.count,

        success: res => {
          if (res.data.code == 0) {
            this.MajorLists = res.data.data;
            this.totalCount = res.data.data.totalCount
          }
        }
      });
    },
    load() {
      this.loading = true;
      setTimeout(() => {
        this.count += 10;
        this.loading = false;
        this.getSchoolMajor();
      }, 5000);
    }
  },
  beforeCreate() {
    this.$nextTick(() => {
      this.getSchool();
      this.getResult();
      this.getSchoolMajor();
    });
  }
};
</script>

<style lang="scss">
.schools {
  background: #ffffff;

  border-radius: 10px;
  width: 100% -136px;
  padding: 0 68px;
  padding-top: 42px;
  margin-bottom: 110px;
  padding-bottom: 60px;
  .school_recrPhone {
    > h3 {
      display: flex;
      padding-bottom: 24px;
      font-size: 14px;
      div {
        background: #2e86ff;
        height: 16px;
        width: 6px;
        border-radius: 2px;
        margin-right: 14px;
        position: relative;
        top: -2px;
      }
    }
    .recrPhone_school {
      padding-bottom: 30px;
      div {
        padding-bottom: 20px;
        color: #a6a6a6;
        a {
          text-decoration: none;
        }
      }
    }
  }
  .school_Scenery {
    padding-bottom: 40px;
    > h3 {
      display: flex;
      padding-bottom: 24px;
      font-size: 14px;
      div {
        background: #2e86ff;
        height: 16px;
        width: 6px;
        border-radius: 2px;
        margin-right: 14px;
        position: relative;
        top: -2px;
      }
    }
    .school_img::-webkit-scrollbar {
      width: 10px; /*对垂直流动条有效*/
      height: 10px; /*对水平流动条有效*/
    }
    .school_img::-webkit-scrollbar-thumb {
      border-radius: 7px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      background-color: #e8e8e8;
    }
    .school_img::-webkit-scrollbar-button {
      background-color: #2e86ff;
    }
    .school_img {
      height: 112px;
      min-width: 200px;
      overflow: hidden;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      white-space: nowrap;
      padding-bottom: 30px;

      span {
        display: block;
        width: 112px;
        height: 112px;
        white-space: nowrap;
        display: inline-block;
        margin: 0 16px;
        img {
          width: 112px;
          height: 112px;
          border-radius: 10px;
        }
      }
    }
  }
  .school_video {
    padding-bottom: 46px;
    > h3 {
      display: flex;
      padding-bottom: 24px;
      font-size: 14px;
      div {
        background: #2e86ff;
        height: 16px;
        width: 6px;
        border-radius: 2px;
        margin-right: 14px;
        position: relative;
        top: -2px;
      }
    }
    .video {
      border-radius: 10px;
      height: 438px;

      overflow: hidden;
      .video_img {
        width: 100%;
        height: 100%;
        position: relative;
        > img {
          width: 100%;
          height: 100%;
        }
        .Mongolia {
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          position: absolute;
          // z-index: 10;
          background: rgba($color: #000000, $alpha: 0.3);
          .button {
            background: #ffffff;
            width: 66px;
            height: 66px;
            margin: 0 auto;
            margin-top: 166px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              display: block;

              width: 40px;
              position: relative;
              left: 4px;
            }
          }
        }
      }
    }
  }
  .school_brief {
    > h3 {
      display: flex;
      padding-bottom: 24px;
      font-size: 14px;
      div {
        background: #2e86ff;
        height: 16px;
        width: 6px;
        border-radius: 2px;
        margin-right: 14px;
        position: relative;
        top: -2px;
      }
    }
    .brief {
      line-height: 16px;
      color: #7d7d7d;
      font-size: 12px;
      text-indent: 28px;
      p {
        margin-bottom: 12px;
      }
    }
  }
  .school_Proportion {
    padding-top: 36px;
    display: flex;
    padding-bottom: 230px;
    .Proportion_left {
      flex: 1;
      > h3 {
        display: flex;
        padding-bottom: 24px;
        font-size: 14px;
        div {
          background: #2e86ff;
          height: 16px;
          width: 6px;
          border-radius: 2px;
          margin-right: 14px;
          position: relative;
          top: -2px;
        }
      }
    }
    .Proportion_right {
      flex: 1;

      > h3 {
        display: flex;
        padding-bottom: 24px;
        font-size: 14px;
        div {
          background: #2e86ff;
          height: 16px;
          width: 6px;
          border-radius: 2px;
          margin-right: 14px;
          position: relative;
          top: -2px;
        }
      }
    }
    .Proportion {
      padding: 44px;
      width: 224px;
      background: #f0f0f0;
      border-radius: 10px;

      .topP {
        display: flex;
        justify-content: space-between;
        .male {
          padding: 10px;
          background: #43a4f6;
          border-radius: 50%;
          img {
            display: block;
            width: 26px;
          }
        }
        .girl {
          padding: 10px;
          background: #8558d8;
          border-radius: 50%;
          img {
            display: block;
            width: 26px;
            height: 26px;
          }
        }
      }
      .Pprogress {
        padding-top: 22px;
        .el-progress-bar__outer {
          background: #c8c8c8;
        }
        .el-progress-bar {
          padding-right: 0;
        }
        .el-progress__text {
          display: none;
        }
      }
      .number {
        display: flex;
        justify-content: space-between;
        color: #757575;
        font-size: 10px;
        padding-top: 8px;
      }
    }
  }
  .df {
    display: flex;
    justify-content: space-between;
  }
  .estimate {
    padding: 30px 0;
    padding-bottom: 200px;
    > h3 {
      display: flex;
      padding-bottom: 24px;
      font-size: 14px;
      div {
        background: #2e86ff;
        height: 16px;
        width: 6px;
        border-radius: 2px;
        margin-right: 14px;
        position: relative;
        top: -2px;
      }
    }

    .estimate_lists {
      width: 300px;
      height: 320px;
      position: relative;
      border-radius: 4px;
      padding: 20px;
      margin-left: 22px;
      padding-top: 60px;
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      overflow-x: auto;
      .lists_header {
        width: 280px;
        display: flex;
        padding-bottom: 10px;
        border-bottom: 1px #7d7d7d solid;
        position: absolute;
        background: #ffffff;
        top: 20px;
        > span {
          padding: 0 10px;
        }
        .right {
          margin-left: 74px;
        }
      }
      .list_estimate::-webkit-scrollbar {
        width: 10px; /*对垂直流动条有效*/
        height: 10px; /*对水平流动条有效*/
      }
      .list_estimate::-webkit-scrollbar-thumb {
        border-radius: 7px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #e8e8e8;
      }
      .list_estimate::-webkit-scrollbar-button {
        background-color: #2e86ff;
      }
      .list_estimate {
        padding-right: 10px;
        height: 100%;
        overflow-x: auto;
        > p {
          text-align: center;
          padding: 10px 0;
        }
        .major_lists {
          overflow: hidden;
          padding-bottom: 10px;
          margin-bottom: 10px;
          border-bottom: 1px rgba(220, 222, 223, 0.959) solid;
          display: flex;
          .estimate_left {
            margin-left: 10px;
            color: #7d7d7d;
            font-size: 14px;
            span {
              position: relative;
              left: 48px;
              display: inline-block;

              width: 166px;
              overflow: hidden; //超出的文本隐藏
              text-overflow: ellipsis; //溢出用省略号显示
              white-space: nowrap; //溢出不换行
            }
          }
          .estimate_right {
            font-size: 14px;

            position: relative;
            color: #e6a23c;
            left: 46px;
          }
          .icon {
            color: #a6a6a6;
          }
        }
      }
      .list_null{
        text-align: center;
        color: #7d7d7d;
        i{
          padding: 20px 0;
          margin-top:20px; 
          display: block;
          font-size: 60px;
        }
      }
    }
  }
}
</style>